<template>
    <div class="tabapp">
      <div class="header">
        <div style="float: left">
          创建时间 &emsp;
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始"
            end-placeholder="结束"
          />
          &emsp; 车次类型
          <el-select v-model="value" class="m-2" placeholder="Select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div
          style="
            float: right;
            display: flex;
            margin-top: 15px;
            margin-right: 15px;
          "
        >
          <el-checkbox label="启用" />
          <el-input
            v-model="input"
            :prefix-icon="Search"
            style="width: 130px; margin: 0 20px"
            placeholder="搜索ID/车次"
          />
          <el-button size="large" color="#1ba9ba" @click="add">
            <img
              src="@/assets/Icons/png/新建白色.png"
              style="width: 30px"
              alt=""
            />
            <span style="color: white; margin-left: 3px">新增车次</span>
          </el-button>
        </div>
      </div>
      <div style="width: 100%">
        <MyTable
          @fatherdelete="deleterow"
          @fatherset="setflag"
          @fatheredit="edit"
          :table-data="ticketdata"
          :column-data="coldata"
        ></MyTable>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import MyTable from "@/components/MyTable.vue";
  import { Search } from "@element-plus/icons-vue";
  import { tickcount, useCounterStore } from "@/store/counter";
  import { storeToRefs } from "pinia";
  import { ref } from "vue";
  const value1 = ref<[Date, Date]>([
    new Date(2000, 10, 10, 10, 10),
    new Date(2000, 10, 11, 10, 10),
  ]);
  const input = ref("");
  const value = ref("全部");
  const options = [
    {
      value: "Option1",
      label: "全部",
    },
    {
      value: "Option2",
      label: "高速动车",
    },
    {
      value: "Option3",
      label: "火车",
    },
  ];
  const coldata = [
  {
      prop: "date",
      label: "出发日期",
      width: "",
    },
    {
      prop: "train",
      label: "车次/类型",
      width: "",
    },
    {
      prop: "startStation",
      label: "出发/到达站",
      width: "",
    },
    {
      prop: "startTime",
      label: "出发/到达时间",
      width: "",
    },
    {
      prop: "litime",
      label: "历时",
      width: "",
    },
    {
      prop: "seatType",
      label: "坐席",
      width: "",
    },
    {
      prop: "subState",
      label: "提交状态",
      width: "",
    },
  ]
  const store = useCounterStore();
  const { ticketdata } = storeToRefs(store);
  const add =()=>{
  
  }
  const deleterow = (row: tickcount) => {
    console.log(row);
    store.ticketdelete(row.id);
  };
  const setflag = (row: tickcount) => {
    console.log(row);
    store.ticketflag(row.id);
  };
  const edit = (row: tickcount) => {
    console.log(row);
  };
  </script>
  
  <style scoped>
  .tabapp {
    width: calc(100% - 20px);
    height: calc(100vh - 80px);
    margin-left: 10px;
    margin-top: 10px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);
    border-radius: 2px;
    border: 1px solid #ccc;
  }
  .header {
    width: 100%;
    height: 110px;
    line-height: 66px;
    padding: 30px 20px;
    overflow: hidden;
  }
  </style>
  